<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筛选简历 - 优化版本</title>
    <link rel="stylesheet" href="theme_1.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
            background: linear-gradient(135deg, #f5f7fa 0%, #e8f4f8 100%) !important;
            min-height: 100vh;
            color: var(--text-primary) !important;
        }

        .container {
            max-width: 750px;
            margin: 0 auto;
            min-height: 100vh;
            background: var(--background);
            position: relative;
        }

        /* 头部导航 */
        .header {
            background: var(--background);
            padding: 44px 16px 20px;
            display: flex;
            align-items: center;
            box-shadow: var(--shadow-xs);
            position: sticky;
            top: 0;
            z-index: var(--z-sticky);
        }

        .back-btn {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-xs);
            background: var(--background-muted);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }

        .back-btn:hover {
            background: var(--background-subtle);
            transform: translateX(-2px);
        }

        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
        }

        .header-right {
            width: 32px;
        }

        /* 主要内容区域 */
        .main-content {
            padding: 0 16px 120px;
        }

        /* 快速筛选区域 */
        .quick-filters {
            background: var(--card-bg);
            border-radius: var(--radius-xl);
            padding: 24px;
            margin: 16px 0;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-light);
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            margin-bottom: 16px;
        }

        .section-icon {
            width: 20px;
            height: 20px;
            color: var(--primary);
        }

        .filter-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }

        .filter-item {
            background: var(--background-subtle);
            border: 2px solid var(--border-light);
            border-radius: var(--radius-md);
            padding: 16px 12px;
            text-align: center;
            cursor: pointer;
            transition: all var(--duration-normal) var(--ease-out);
            position: relative;
            overflow: hidden;
        }

        .filter-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transition: left var(--duration-slow) var(--ease-out);
        }

        .filter-item:hover::before {
            left: 100%;
        }

        .filter-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: var(--filter-active-border);
        }

        .filter-item.active {
            background: var(--filter-active-bg);
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(0, 179, 134, 0.1);
        }

        .filter-label {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 4px;
            display: block;
        }

        .filter-value {
            font-size: 14px;
            font-weight: var(--font-weight-medium);
            color: var(--text-primary);
        }

        .filter-item.active .filter-value {
            color: var(--primary);
        }

        /* 地点筛选 */
        .location-filters {
            margin-bottom: 24px;
        }

        .location-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
        }

        .location-item {
            background: var(--background-subtle);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-sm);
            padding: 8px 12px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }

        .location-item:hover {
            background: var(--filter-hover-bg);
            border-color: var(--primary);
        }

        .location-item.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        /* 学校类型 */
        .school-type-filters {
            margin-bottom: 24px;
        }

        .radio-group {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .radio-item {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            transition: all var(--duration-fast) var(--ease-out);
        }

        .radio-item:hover {
            background: var(--background-subtle);
        }

        .radio-circle {
            width: 18px;
            height: 18px;
            border: 2px solid var(--border-normal);
            border-radius: 50%;
            position: relative;
            transition: all var(--duration-normal) var(--ease-out);
        }

        .radio-circle::after {
            content: '';
            width: 8px;
            height: 8px;
            background: var(--primary);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform var(--duration-normal) var(--ease-bounce);
        }

        .radio-item.active .radio-circle {
            border-color: var(--primary);
        }

        .radio-item.active .radio-circle::after {
            transform: translate(-50%, -50%) scale(1);
        }

        .radio-label {
            font-size: 14px;
            color: var(--text-primary);
            font-weight: var(--font-weight-medium);
        }

        /* 已选条件 */
        .selected-filters {
            background: var(--background-subtle);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 24px;
        }

        .selected-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .selected-count {
            background: var(--primary);
            color: white;
            font-size: 12px;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-weight: var(--font-weight-medium);
        }

        .clear-all-btn {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 12px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: var(--radius-xs);
            transition: all var(--duration-fast) var(--ease-out);
        }

        .clear-all-btn:hover {
            background: var(--background-muted);
            color: var(--text-secondary);
        }

        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .tag {
            background: var(--tag-bg);
            color: var(--tag-text);
            padding: 6px 12px;
            border-radius: var(--radius-full);
            font-size: 12px;
            font-weight: var(--font-weight-medium);
            display: flex;
            align-items: center;
            gap: 6px;
            animation: tagEnter 0.4s var(--ease-bounce);
        }

        @keyframes tagEnter {
            0% {
                opacity: 0;
                transform: scale(0) rotate(180deg);
            }
            60% {
                transform: scale(1.1) rotate(-10deg);
            }
            100% {
                opacity: 1;
                transform: scale(1) rotate(0deg);
            }
        }

        .tag-remove {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 12px;
            transition: all var(--duration-fast) var(--ease-out);
        }

        .tag-remove:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        /* 搜索按钮 */
        .search-footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 750px;
            background: var(--background);
            padding: 16px;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
            border-top: 1px solid var(--border-light);
        }

        .search-btn {
            width: 100%;
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: var(--radius-lg);
            padding: 16px;
            font-size: 16px;
            font-weight: var(--font-weight-semibold);
            cursor: pointer;
            transition: all var(--duration-normal) var(--ease-out);
            box-shadow: var(--shadow-md);
            position: relative;
            overflow: hidden;
        }

        .search-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transition: all var(--duration-slower) var(--ease-out);
            transform: translate(-50%, -50%);
        }

        .search-btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .search-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .search-btn:active {
            transform: translateY(0);
            box-shadow: var(--shadow-md);
        }

        .search-btn-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            z-index: 1;
        }

        /* 响应式设计 */
        @media (max-width: 375px) {
            .filter-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .location-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .radio-group {
                flex-direction: column;
                gap: 8px;
            }
        }

        /* 加载和空状态动画 */
        .loading-shimmer {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }

        /* 微交互动画 */
        .bounce-in {
            animation: bounceIn 0.6s var(--ease-bounce);
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.5s var(--ease-out);
        }

        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="back-btn" onclick="goBack()">
                <i data-lucide="arrow-left"></i>
            </div>
            <h1 class="header-title">筛选简历</h1>
            <div class="header-right"></div>
        </header>

        <!-- 主要内容 -->
        <main class="main-content">
            <!-- 快速筛选区域 -->
            <section class="quick-filters fade-in-up">
                <h2 class="section-title">
                    <i data-lucide="target" class="section-icon"></i>
                    快速筛选
                </h2>
                
                <div class="filter-grid">
                    <div class="filter-item" data-filter="experience" onclick="toggleFilter(this)">
                        <span class="filter-label">工作经验</span>
                        <span class="filter-value">不限</span>
                    </div>
                    <div class="filter-item" data-filter="education" onclick="toggleFilter(this)">
                        <span class="filter-label">学历要求</span>
                        <span class="filter-value">不限</span>
                    </div>
                    <div class="filter-item" data-filter="salary" onclick="toggleFilter(this)">
                        <span class="filter-label">薪资范围</span>
                        <span class="filter-value">不限</span>
                    </div>
                </div>
            </section>

            <!-- 地点筛选 -->
            <section class="quick-filters fade-in-up" style="animation-delay: 0.1s">
                <h2 class="section-title">
                    <i data-lucide="map-pin" class="section-icon"></i>
                    工作地点
                </h2>
                
                <div class="location-grid">
                    <div class="location-item" onclick="toggleLocation(this)">北京</div>
                    <div class="location-item" onclick="toggleLocation(this)">上海</div>
                    <div class="location-item" onclick="toggleLocation(this)">深圳</div>
                    <div class="location-item" onclick="toggleLocation(this)">杭州</div>
                    <div class="location-item" onclick="toggleLocation(this)">广州</div>
                    <div class="location-item" onclick="toggleLocation(this)">成都</div>
                    <div class="location-item" onclick="toggleLocation(this)">南京</div>
                    <div class="location-item" onclick="toggleLocation(this)">武汉</div>
                </div>
            </section>

            <!-- 学校类型 -->
            <section class="quick-filters fade-in-up" style="animation-delay: 0.2s">
                <h2 class="section-title">
                    <i data-lucide="graduation-cap" class="section-icon"></i>
                    学校类型
                </h2>
                
                <div class="radio-group">
                    <div class="radio-item active" onclick="selectSchoolType(this)" data-value="">
                        <div class="radio-circle"></div>
                        <span class="radio-label">不限</span>
                    </div>
                    <div class="radio-item" onclick="selectSchoolType(this)" data-value="985">
                        <div class="radio-circle"></div>
                        <span class="radio-label">985院校</span>
                    </div>
                    <div class="radio-item" onclick="selectSchoolType(this)" data-value="211">
                        <div class="radio-circle"></div>
                        <span class="radio-label">211院校</span>
                    </div>
                    <div class="radio-item" onclick="selectSchoolType(this)" data-value="normal">
                        <div class="radio-circle"></div>
                        <span class="radio-label">普通院校</span>
                    </div>
                </div>
            </section>

            <!-- 已选条件 -->
            <section class="selected-filters fade-in-up" style="animation-delay: 0.3s" id="selectedFilters" style="display: none;">
                <div class="selected-title">
                    <div style="display: flex; align-items: center; gap: 8px;">
                        <i data-lucide="filter" style="width: 16px; height: 16px; color: var(--primary);"></i>
                        <span style="font-weight: 600; font-size: 14px;">已选条件</span>
                        <span class="selected-count" id="selectedCount">0</span>
                    </div>
                    <button class="clear-all-btn" onclick="clearAllFilters()">清除全部</button>
                </div>
                <div class="tags-container" id="tagsContainer"></div>
            </section>
        </main>

        <!-- 搜索按钮 -->
        <footer class="search-footer">
            <button class="search-btn" onclick="searchResumes()">
                <div class="search-btn-content">
                    <i data-lucide="search"></i>
                    <span>搜索简历</span>
                </div>
            </button>
        </footer>
    </div>

    <script>
        // 初始化图标
        lucide.createIcons();

        // 筛选状态管理
        let filters = {
            experience: '',
            education: '',
            salary: '',
            location: [],
            schoolType: ''
        };

        // 筛选选项配置
        const filterOptions = {
            experience: [
                { value: '', label: '不限' },
                { value: '0', label: '应届生' },
                { value: '1-3', label: '1-3年' },
                { value: '3-5', label: '3-5年' },
                { value: '5-10', label: '5-10年' },
                { value: '10+', label: '10年以上' }
            ],
            education: [
                { value: '', label: '不限' },
                { value: '大专', label: '大专' },
                { value: '本科', label: '本科' },
                { value: '硕士', label: '硕士' },
                { value: '博士', label: '博士' }
            ],
            salary: [
                { value: '', label: '不限' },
                { value: '0-5', label: '0-5k' },
                { value: '5-10', label: '5-10k' },
                { value: '10-20', label: '10-20k' },
                { value: '20-30', label: '20-30k' },
                { value: '30+', label: '30k以上' }
            ]
        };

        // 切换筛选项
        function toggleFilter(element) {
            const filterType = element.dataset.filter;
            showFilterModal(filterType, element);
        }

        // 显示筛选模态框（这里简化为直接切换选项）
        function showFilterModal(filterType, element) {
            const options = filterOptions[filterType];
            const currentValue = filters[filterType];
            const currentIndex = options.findIndex(opt => opt.value === currentValue);
            const nextIndex = (currentIndex + 1) % options.length;
            const nextOption = options[nextIndex];
            
            filters[filterType] = nextOption.value;
            element.querySelector('.filter-value').textContent = nextOption.label;
            
            if (nextOption.value) {
                element.classList.add('active');
            } else {
                element.classList.remove('active');
            }
            
            updateSelectedFilters();
        }

        // 切换地点
        function toggleLocation(element) {
            const location = element.textContent;
            const index = filters.location.indexOf(location);
            
            if (index > -1) {
                filters.location.splice(index, 1);
                element.classList.remove('active');
            } else {
                filters.location.push(location);
                element.classList.add('active');
            }
            
            updateSelectedFilters();
        }

        // 选择学校类型
        function selectSchoolType(element) {
            document.querySelectorAll('.radio-item').forEach(item => {
                item.classList.remove('active');
            });
            
            element.classList.add('active');
            filters.schoolType = element.dataset.value;
            updateSelectedFilters();
        }

        // 更新已选条件显示
        function updateSelectedFilters() {
            const tagsContainer = document.getElementById('tagsContainer');
            const selectedSection = document.getElementById('selectedFilters');
            const countElement = document.getElementById('selectedCount');
            
            tagsContainer.innerHTML = '';
            let count = 0;
            
            // 添加筛选条件标签
            Object.keys(filters).forEach(key => {
                if (key === 'location') {
                    filters.location.forEach(loc => {
                        if (loc) {
                            addTag(`工作地点: ${loc}`, () => removeLocationFilter(loc));
                            count++;
                        }
                    });
                } else if (filters[key]) {
                    const option = filterOptions[key]?.find(opt => opt.value === filters[key]);
                    if (option) {
                        addTag(`${getFilterLabel(key)}: ${option.label}`, () => removeFilter(key));
                        count++;
                    } else if (key === 'schoolType') {
                        const schoolLabels = {
                            '985': '985院校',
                            '211': '211院校',
                            'normal': '普通院校'
                        };
                        addTag(`学校类型: ${schoolLabels[filters[key]]}`, () => removeFilter(key));
                        count++;
                    }
                }
            });
            
            countElement.textContent = count;
            selectedSection.style.display = count > 0 ? 'block' : 'none';
        }

        // 添加标签
        function addTag(text, onRemove) {
            const tagsContainer = document.getElementById('tagsContainer');
            const tag = document.createElement('div');
            tag.className = 'tag';
            tag.innerHTML = `
                <span>${text}</span>
                <div class="tag-remove" onclick="removeTag(this, ${onRemove})">×</div>
            `;
            tagsContainer.appendChild(tag);
        }

        // 移除标签
        function removeTag(element, callback) {
            const tag = element.parentElement;
            tag.style.animation = 'tagExit 0.2s ease-in forwards';
            setTimeout(() => {
                callback();
                updateSelectedFilters();
            }, 200);
        }

        // 移除筛选条件
        function removeFilter(key) {
            filters[key] = '';
            // 更新UI显示
            const filterElement = document.querySelector(`[data-filter="${key}"]`);
            if (filterElement) {
                filterElement.classList.remove('active');
                filterElement.querySelector('.filter-value').textContent = '不限';
            }
            
            if (key === 'schoolType') {
                document.querySelectorAll('.radio-item').forEach(item => {
                    item.classList.remove('active');
                });
                document.querySelector('.radio-item[data-value=""]').classList.add('active');
            }
        }

        // 移除地点筛选
        function removeLocationFilter(location) {
            const index = filters.location.indexOf(location);
            if (index > -1) {
                filters.location.splice(index, 1);
            }
            
            document.querySelectorAll('.location-item').forEach(item => {
                if (item.textContent === location) {
                    item.classList.remove('active');
                }
            });
        }

        // 获取筛选条件标签
        function getFilterLabel(key) {
            const labels = {
                experience: '工作经验',
                education: '学历要求',
                salary: '薪资范围'
            };
            return labels[key] || key;
        }

        // 清除所有筛选条件
        function clearAllFilters() {
            filters = {
                experience: '',
                education: '',
                salary: '',
                location: [],
                schoolType: ''
            };
            
            // 重置UI
            document.querySelectorAll('.filter-item').forEach(item => {
                item.classList.remove('active');
                item.querySelector('.filter-value').textContent = '不限';
            });
            
            document.querySelectorAll('.location-item').forEach(item => {
                item.classList.remove('active');
            });
            
            document.querySelectorAll('.radio-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector('.radio-item[data-value=""]').classList.add('active');
            
            updateSelectedFilters();
        }

        // 搜索简历
        function searchResumes() {
            // 添加加载动画
            const btn = document.querySelector('.search-btn');
            const originalContent = btn.innerHTML;
            btn.innerHTML = '<div class="search-btn-content"><i data-lucide="loader-2" style="animation: spin 1s linear infinite;"></i><span>搜索中...</span></div>';
            lucide.createIcons();
            
            // 模拟搜索延迟
            setTimeout(() => {
                console.log('搜索条件:', filters);
                // 这里可以跳转到结果页面
                alert('搜索完成！找到相关简历。');
                btn.innerHTML = originalContent;
                lucide.createIcons();
            }, 1500);
        }

        // 返回上一页
        function goBack() {
            console.log('返回上一页');
        }

        // 添加样式动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            
            @keyframes tagExit {
                0% {
                    opacity: 1;
                    transform: scale(1) rotate(0deg);
                }
                100% {
                    opacity: 0;
                    transform: scale(0) rotate(90deg);
                }
            }
        `;
        document.head.appendChild(style);

        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const elements = document.querySelectorAll('.fade-in-up');
            elements.forEach((el, index) => {
                el.style.animationDelay = `${index * 0.1}s`;
            });
        });
    </script>
</body>
</html>
